<!--
 * @Description: 
 * @Date: 2020-12-16 14:53:34
 * @LastEditors: lother
 * @LastEditTime: 2021-02-02 15:30:41
 * @FilePath: \VicoAccountOpening-H5\src\views\autograph\index.vue
-->
<template>
    <div>
        <l-header></l-header>
        <div class="w89">
            <h2 class="title">{{$t('autograph.index.5636lzhrifo0')}}</h2>
            <h3 class="title_msg">{{$t('autograph.index.5636lzhrj7w0')}}</h3>
            <div class="auto_img" @click="autoImg">
                <img :src="form.sign" alt="" v-show="form.sign?true:false">
            </div>
            <div class="username_auto">
                <p>{{$t('autograph.index.5636m602z8s0')}}: {{user_infoList.real_name}}</p>
                <p>{{$t('autograph.index.5636m6030ms0')}}: {{form.signDate?form.signDate:dateTime()}}</p>
            </div>
            <van-button type="info" block class="next-step" :loading="loading"  @click="submit">{{$t('autograph.index.5636lzhrji00')}}</van-button>
        </div>
    </div>
</template>
<script>
import {  submitList} from '@/api/common'
export default {
    inject: ['branch','user_info','StepsPage','user_fill'],
    computed:{
        StepsPageList(){
            return this.StepsPage()
        },
        user_infoList(){
            return this.user_info()
        },
        user_fill_list(){
            return this.user_fill()
        },
        img(){
            return (localStorage.getItem("img") ?? '')
        }
    },
    data() {
        return {
            form:{
                sign:this.img,
                signDate:""
            },
            loading:false
        }
    },
    methods:{
        autoImg(){
            this.$router.replace('autoImg')
        },
        dateTime(){
            var date = new Date();
            return  date.getFullYear()+'-'+ (date.getMonth() + 1) +'-'+date.getDate()
        },
        submit(){
            if(!this.form.sign){
                this.$toast(this.$t('autograph.index.56aogwiwe8g0'))
                return false
            }
            this.loading=true;
            var { curr_id } =  this.StepsPageList;
            var obj = Object.assign({}, {pageId:curr_id , fields :Object.assign({},this.form)  })
            var _this  =this;
            submitList(obj)
            .then(res=>{
                if(res.code==1){
                    localStorage.removeItem("img")
                    this.$nextPage({pageId:this.StepsPageList.next_id})
                    .then(next=>{
                        this.loading = false;
                    })
                }else{
                    this.loading = false;
                }
            })
            .catch((res)=>{
                this.loading = false;
            })
        }
    },
    watch:{
          user_fill_list:{
            handler(list,old){
                this.form={}
                this.$forceUpdate();
                var  reg= /^https?:\/\/(.+\/)+.+(\.(gif|png|jpg|jpeg|webp|svg|psd|bmp|tif))$/i
                var imgBoll = reg.test(list.sign)
                this.form.sign =  (this.img?this.img: (imgBoll?list.sign:'' ) )
                this.form.signDate =  (list.signDate?list.signDate:this.dateTime()) 
            },
            immediate:true,
            deep:true
        }
    }
}
</script>
<style lang="less" scoped>
    .auto_img{
        position: relative;
        border: 0.02px solid @sliderColor;
        border-radius: 3px;
        height: 4rem;
        margin-top: 0.4rem;
        overflow: hidden;
        .center;
        img{
            // max-height: 100%;
            max-width: 100%;
            // transform:rotate(-90deg);
            // -ms-transform:rotate(-90deg); 	/* IE 9 */
            // -moz-transform:rotate(-90deg); 	/* Firefox */
            // -webkit-transform:rotate(-90deg); /* Safari 和 Chrome */
            // -o-transform:rotate(-90deg); 	/* Opera */
        }
    }
    .username_auto{
        padding:0.4rem 0 0 0;
        p{
            .size;
        }
    }
</style>